<script setup>

</script>

<template>
    <div>
        <div class="grzx">
            <div class="son">
                <img src="../imgs/头像.jpg" alt="">
                <h2 class="wdddsr">伟大的读书人的读书页面</h2>
                <ul class="liulan">
                    <li>读书主页</li>
                    <li>书评 </li>
                    <li>笔记</li>
                    <li>在读</li>
                    <li>想读 </li>
                    <li>读过</li>
                    <li>作者</li>
                    <li>列表</li>
                    <li>书单</li>
                    <li>设置</li>
                    <li>主页</li>
                </ul>

            </div>
            <div class="zd">当你对一本图书进行读过、在读、想读的操作之后，这本书会出现在这里。</div>
            <div class="wdbj">我的笔记 · · · </div>
            <div class="suiji">笔记是你阅读中的随想随记，是你写在书页留白处的那些话。</div>
            <div class="grsz">
                <img src="../imgs/头像.jpg" alt="">
                <div  class="nc">
                    <div>伟大的读书人</div>
                    <div class="shijian">2022-09-27 加入</div>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<style scoped>
.grzx {
    width: 1040px;
    height: 420px;
    margin-left: 245px;
    margin-top: 50px;
}

.son {
    width: 1040px;
    height: 58px;
    display: flex;
}

.liulan {
    margin-top: 36px;
    margin-left: -260px;
}

.liulan li {
    list-style: none;
    display: inline;
    margin: 5px;
}

.zd {
    margin-top: 60px;
    font-size: 10px;
}

.wdbj {
    margin-top: 30px;
}

.suiji {
    margin-top: 20px;
    font-size: 10px;
}

.grsz {
    width: 272px;
    height: 113px;
    background-color: #F8F8F0;
    margin-top: -110px;
    margin-left: 850px;
}

.grsz img {
    margin: 15px;
}

.nc {
    margin-top: -65px;
    margin-left: 75px;
}

.shijian{
    font-size: 10px;
    color: #9a9a9a;
}

.wdddsr{
    margin-top: 3px;
    margin-left: -0px;
}
</style>